<template>
  <div class="bg-white rounded shadow-sm p-4 candidate-card transition-shadow hover:shadow-md">
    <div class="flex">
      <!-- 左侧信息 -->
      <div class="flex-1">
        <div class="flex items-center mb-3">
          <div class="relative w-12 h-12 mr-3">
            <div class="w-12 h-12 rounded-full overflow-hidden">
              <img :src="candidate.avatar" :alt="candidate.name" class="w-full h-full object-cover">
            </div>
            <div v-if="candidate.isActive" class="absolute -top-1 -right-1 w-5 h-5 flex items-center justify-center bg-red-500 text-white text-xs rounded-full">
              {{ candidate.experience.charAt(0) }}
            </div>
          </div>
          <div>
            <div class="flex items-center">
              <h3 class="font-medium text-gray-800">{{ candidate.name }}</h3>
              <div class="ml-2 flex items-center">
                <i class="ri-phone-line text-primary"></i>
                <span class="text-gray-500 text-sm ml-1">{{ candidate.lastActive }}</span>
              </div>
            </div>
            <div class="flex items-center text-sm text-gray-500 mt-1 space-x-2">
              <span>{{ candidate.age }}岁</span>
              <span class="w-1 h-1 bg-gray-300 rounded-full"></span>
              <span>{{ candidate.experience }}</span>
              <span class="w-1 h-1 bg-gray-300 rounded-full"></span>
              <span>{{ candidate.education }}</span>
              <span class="w-1 h-1 bg-gray-300 rounded-full"></span>
              <span>{{ candidate.jobStatus }}</span>
              <span class="w-1 h-1 bg-gray-300 rounded-full"></span>
              <span>{{ candidate.expectedSalary }}</span>
            </div>
          </div>
        </div>
        <div class="text-sm text-gray-700 mb-2">
          {{ candidate.profile }}
        </div>
      </div>
      
      <!-- 右侧信息 -->
      <div class="w-48 flex flex-col justify-between ml-4 pl-4 border-l border-gray-100">
        <div class="space-y-2">
          <div class="flex items-start">
            <i class="ri-map-pin-line text-gray-400 mr-2 mt-0.5"></i>
            <div>
              <div class="text-sm text-gray-600">期望城市：{{ candidate.expectedLocation }}</div>
            </div>
          </div>
          <div class="flex items-start">
            <i class="ri-briefcase-line text-gray-400 mr-2 mt-0.5"></i>
            <div>
              <div class="text-sm text-gray-600">职位：{{ candidate.currentCompany }} · {{ candidate.currentPosition }}</div>
            </div>
          </div>
          <div class="flex items-start">
            <i class="ri-building-line text-gray-400 mr-2 mt-0.5"></i>
            <div>
              <div class="text-sm text-gray-600">院校：{{ candidate.university }} · {{ candidate.expectedIndustry }}</div>
            </div>
          </div>
        </div>
        <button 
          @click="$emit('viewDetail', candidate.id)"
          class="mt-3 border border-primary text-primary px-4 py-1.5 rounded text-sm hover:bg-primary hover:text-white transition-colors"
        >
          查看详情
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Candidate } from '../types'

interface Props {
  candidate: Candidate
}

defineProps<Props>()
defineEmits<{
  viewDetail: [candidateId: string]
}>()
</script>
